/* 
    登录页面
 */
<template>
    <div class="loginMain">
        <!-- 导航栏 -->
        <van-nav-bar title="登录" left-text="返回" left-arrow @click-left="$router.back()" />

        <!-- 登录表单 -->
        <van-form ref="loginForm" @submit="handleSubmit()">
            <van-field v-model="username" name="用户名" label="用户名" placeholder="用户名" :rules="rulesFrom.username" />
            <van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码"
                :rules="rulesFrom.password" />
            <van-field v-model="mobile" type="number" name="mobile" maxlength="11" placeholder="手机号"
                :rules="rulesFrom.mobile">
                <!-- <template #left-icon>
                    <i class="iconfont icon-shouji"></i>
                </template> -->
                <i slot="left-icon" class="iconfont icon-shouji"></i>
            </van-field>
            <van-field v-model="code" name="code" placeholder="验证码" :rules="rulesFrom.code" left-icon="closed-eye">
                <template #button>
                    <van-count-down :time="1000 * 10" format="ss 秒/s" v-if="isCountDownShow"
                        @finish="isCountDownShow = false" />
                    <van-button v-else type="primary" size="small" @click="handleGetCode()">获取验证码</van-button>
                </template>
            </van-field>
            <div style="margin: 16px;">
                <van-button block type="info" @click="handleSubmit()">登录</van-button>
            </div>
        </van-form>
    </div>
</template>

<script>
import { loginAPI } from '@/api/login'

export default {
    data() {
        return {
            username: '',
            password: '',
            mobile: '',
            code: '',
            rulesFrom: {
                username: [{ required: true, message: '请填写用户名' }],
                password: [{ required: true, message: '请填写密码' }],
                mobile: [{ required: true, message: '请填写手机号' }, { pattern: /1[3|5|7|8]\d{9}/, message: '手机号格式输入错误' }],
                code: [{ required: true, message: '请填写验证码' }, { pattern: /^\d{6}$/, message: '验证码格式输入错误' }],
            },
            isCountDownShow: false,
        }
    },
    methods: {
        // 获取验证码
        async handleGetCode() {
            const that = this
            // 1、验证手机号
            try {
                await that.$refs.loginForm.validate('mobile')
            } catch (error) {
                return console.log('验证失败', error)
            }

            // 2、验证通过,显示倒计时
            that.isCountDownShow = true

            // 3、请求发送验证码

        },
        // 登录按钮
        async handleSubmit() {
            const that = this
            that.$toast.loading({
                message: '登录中...',
                forbidClick: true,//禁止背景点击
                duration: 0, // 持续展示,默认2000
            })
            // if (that.username.length > 0 && that.password.length > 0) {
            //     that.$store.commit('setUser', that.username)
            //     that.$toast.success('登录成功')
            //     that.$router.back()
            //     that.$router.push({ path: '/home' }).catch(() => { });
            // } else {
            //     that.$toast.fail('登录失败,请稍后重试')
            // }
            let param = {
                username: that.username,
                password: that.password
            }
            const res = await loginAPI(param)
            if (res.data.code == 0) {
                // 处理Token
                that.$store.commit('setUser', res.data.data)
                // 登录成功
                that.$toast.success('登录成功')
                // 跳转页面
                that.$router.back()
                that.$router.push({ path: '/home' }).catch(() => { });
            } else if (res.data.code == 400) {
                that.$toast.fail('验证码过期,请稍后重试')
            } else {
                // 登录失败
                that.$toast.fail('登录失败,请稍后重试')
            }
        },
    }
}
</script>

<style scoped lang="less">
.loginMain {
    width: 100%;
    height: 100%;
}
</style>